<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
    <style>
        .redBox{
            width: 100px;
            height: 100px;
            background: red;
        }
        .yellowBox{
            width: 100px;
            height: 100px;
            background: yellow;
        }
    </style>
</head>

<body>
<div id="root">
    <h2 v-text="n"></h2>
    <!-- 自定义指令 -->
    <h2 v-big="n"></h2>
    <button @click="plusN">按钮</button>

    <!-- 全局指令 -->
    <div v-add-class-name="redBox"></div>
    <div v-add-class-name="yellowBox"></div>
</div>


<script>
    Vue.config.productionTip = false;
    // 全局指令
    Vue.directive("add-class-name",function(ele,binging){
        ele.className = binging.value;
    })
    const Vm = new Vue({
        el: "#root",
        data: {
            n: 1,
            redBox: 'redBox',
            yellowBox: 'yellowBox'
        },
        // 局部指令
        directives: {
            // 定义big指令
            big: {
                // 指令与元素成功绑定时（一上来）
                bind(ele,binging){
                    console.log('ele,binging',ele,binging);
                },
                // 指令所在元素被渲染到页面上时
                inserted(ele,binging){
                    console.log('ele,binging',ele,binging);
                },
                // 指令所在的模版被重新解析时
                update(ele,binging){
                    console.log('ele,binging',ele,binging);
                },
            }
        },
        methods: {
            plusN(){
                this.n++;
            }
        },
    })

</script>
</body>
</html>
